<template>
  <div>
    <el-form :model="queryParam" ref="queryParam" inline class="demo-form-inline">
      <el-form-item label="时间范围:" prop="timespan">
        <el-date-picker
          v-model="queryParam.timespan"
          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="是否购买" prop="isBuy">
        <el-select v-model="queryParam.isBuy" placeholder="请选择" clearable>
          <el-option :key="1" label="是" :value="1"></el-option>
          <el-option :key="0" label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="primary" @click="resetForm('queryParam')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="12">
        <label>总推荐人数：</label>
        {{total}}
      </el-col>
      <el-col :span="12">
        <label>购买人数：</label>
        {{buyNum}}
      </el-col>
    </el-row>
    <div class="tableList">
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" label="排序" width="50"></el-table-column>
        <el-table-column prop="photoUrl" label="头像" width="100">
          <template slot-scope="scope">
            <img :src="scope.row.photoUrl" width="80" height="80" />
          </template>
        </el-table-column>
        <el-table-column prop="id" label="分销人Id" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="recommenderDate" label="介绍日期" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="allTotal" label="累计消费" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="memberLevel" label="会员等级" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="isOrdered" label="是否购买" width="100" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.isOrdered?'是':'否'}}</template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :total="total"
          :current-page.sync="pageNum"
          :page-sizes="[10, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { get, postJson, postXform } from "@/utils/request.js";
export default {
  watch: {},
  data() {
    return {
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      buyNum: 0,
      queryParam: {
        timespan: [],
        isBuy: null
      },
    };
  },
  created() {
    this.getList();
    this.countHasBuyRecommender();
  },
  computed: {},
  methods: {
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      let startDate, endDate;
      if (this.queryParam.timespan && this.queryParam.timespan.length > 0) {
        startDate = this.queryParam.timespan[0];
        endDate = this.queryParam.timespan[1];
      }
      get("/doctorRole/pageRecommender", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        startDate:startDate,
        endDate:endDate,
        isBuy:this.queryParam.isBuy
      }).then(res => {
        this.list = res.data.data.list;
        // 自定义下标
        this.list.forEach((e, idx) => {
          e.idx = (idx + 1) * this.pageNum;
        });

        this.total = Number.parseInt(res.data.data.total);
        this.pageNum = res.data.data.pageNum;
      });
    },
    handleClose(done) {
      this.$emit("update:visible", false);
      done();
      console.log(this.visible);
    },
    countHasBuyRecommender() {
      this.$https.get("doctorRole/countHasBuyRecommender", {}).then(res => {
        this.buyNum = res.data.data;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "queryParam") {
        this.getList();
      }
    }
  }
};
</script>

<style lang="less">
</style>